<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理接口测试</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            margin-top: 30px;
        }

        .card {
            margin-bottom: 20px;
        }

        .response-area {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            min-height: 100px;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2 class="mb-4">设备管理接口测试</h2>

        <!-- 设备基础信息 -->
        <div class="card">
            <div class="card-header">
                <h5>设备基础信息</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <button class="btn btn-primary" onclick="getDeviceDetail()">获取设备详情</button>
                    <input type="number" id="deviceId" class="form-control d-inline-block w-25" placeholder="设备ID">
                </div>
                <div class="mb-3">
                    <button class="btn btn-success" onclick="addDevice()">新增设备</button>
                    <button class="btn btn-warning" onclick="updateDevice()">修改设备</button>
                    <button class="btn btn-danger" onclick="deleteDevice()">删除设备</button>
                </div>
            </div>
        </div>

        <!-- 设备位置信息 -->
        <div class="card">
            <div class="card-header">
                <h5>设备位置信息</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <button class="btn btn-primary" onclick="getDeviceLocation()">获取位置信息</button>
                    <button class="btn btn-success" onclick="addDeviceLocation()">新增位置</button>
                    <button class="btn btn-warning" onclick="updateDeviceLocation()">修改位置</button>
                </div>
            </div>
        </div>

        <!-- 设备状态信息 -->
        <div class="card">
            <div class="card-header">
                <h5>设备状态信息</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <button class="btn btn-primary" onclick="getDeviceStatus()">获取状态信息</button>
                    <button class="btn btn-success" onclick="addDeviceStatus()">新增状态</button>
                    <button class="btn btn-warning" onclick="updateDeviceStatus()">修改状态</button>
                    <button class="btn btn-info" onclick="updateDeviceOnline()">更新在线状态</button>
                </div>
            </div>
        </div>

        <!-- 设备通道信息 -->
        <div class="card">
            <div class="card-header">
                <h5>设备通道信息</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <button class="btn btn-primary" onclick="getDeviceChannels()">获取通道列表</button>
                    <button class="btn btn-success" onclick="addDeviceChannel()">新增通道</button>
                    <button class="btn btn-warning" onclick="updateDeviceChannel()">修改通道</button>
                    <button class="btn btn-danger" onclick="deleteDeviceChannel()">删除通道</button>
                </div>
            </div>
        </div>

        <!-- 响应结果 -->
        <div class="card">
            <div class="card-header">
                <h5>响应结果</h5>
            </div>
            <div class="card-body">
                <pre id="response" class="response-area"></pre>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 基础URL
        const baseUrl = '/device';

        // 显示响应结果
        function showResponse (data) {
            $('#response').text(JSON.stringify(data, null, 2));
        }

        // 设备基础信息接口
        function getDeviceDetail () {
            const deviceId = $('#deviceId').val();
            $.get(`${baseUrl}/${deviceId}`, function (data) {
                showResponse(data);
            });
        }

        function addDevice () {
            const deviceData = {
                deviceName: "测试设备",
                deviceType: "CAMERA",
                manufacturer: "测试厂商",
                model: "TEST-001",
                serialNumber: "SN" + Date.now()
            };
            $.ajax({
                url: baseUrl,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(deviceData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        function updateDevice () {
            const deviceId = $('#deviceId').val();
            const deviceData = {
                id: deviceId,
                deviceName: "更新设备",
                deviceType: "CAMERA",
                manufacturer: "更新厂商",
                model: "UPDATE-001",
                serialNumber: "SN" + Date.now()
            };
            $.ajax({
                url: baseUrl,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(deviceData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        function deleteDevice () {
            const deviceId = $('#deviceId').val();
            $.ajax({
                url: `${baseUrl}/${deviceId}`,
                type: 'DELETE',
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        // 设备位置信息接口
        function getDeviceLocation () {
            const deviceId = $('#deviceId').val();
            $.get(`${baseUrl}/location/${deviceId}`, function (data) {
                showResponse(data);
            });
        }

        function addDeviceLocation () {
            const deviceId = $('#deviceId').val();
            const locationData = {
                deviceId: deviceId,
                location: "测试位置",
                address: "测试地址",
                longitude: 116.404,
                latitude: 39.915
            };
            $.ajax({
                url: `${baseUrl}/location`,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(locationData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        function updateDeviceLocation () {
            const deviceId = $('#deviceId').val();
            const locationData = {
                deviceId: deviceId,
                location: "更新位置",
                address: "更新地址",
                longitude: 116.404,
                latitude: 39.915
            };
            $.ajax({
                url: `${baseUrl}/location`,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(locationData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        // 设备状态信息接口
        function getDeviceStatus () {
            const deviceId = $('#deviceId').val();
            $.get(`${baseUrl}/status/${deviceId}`, function (data) {
                showResponse(data);
            });
        }

        function addDeviceStatus () {
            const deviceId = $('#deviceId').val();
            const statusData = {
                deviceId: deviceId,
                status: 1,
                lastOnlineTime: new Date().toISOString()
            };
            $.ajax({
                url: `${baseUrl}/status`,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(statusData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        function updateDeviceStatus () {
            const deviceId = $('#deviceId').val();
            const statusData = {
                deviceId: deviceId,
                status: 1,
                lastOnlineTime: new Date().toISOString()
            };
            $.ajax({
                url: `${baseUrl}/status`,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(statusData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        function updateDeviceOnline () {
            const deviceId = $('#deviceId').val();
            $.ajax({
                url: `${baseUrl}/online/${deviceId}`,
                type: 'PUT',
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        // 设备通道信息接口
        function getDeviceChannels () {
            const deviceId = $('#deviceId').val();
            $.get(`${baseUrl}/channels/${deviceId}`, function (data) {
                showResponse(data);
            });
        }

        function addDeviceChannel () {
            const deviceId = $('#deviceId').val();
            const channelData = {
                deviceId: deviceId,
                channelNo: "CH001",
                channelName: "测试通道",
                channelType: "VIDEO",
                status: 1
            };
            $.ajax({
                url: `${baseUrl}/channel`,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(channelData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        function updateDeviceChannel () {
            const deviceId = $('#deviceId').val();
            const channelData = {
                deviceId: deviceId,
                channelNo: "CH001",
                channelName: "更新通道",
                channelType: "VIDEO",
                status: 1
            };
            $.ajax({
                url: `${baseUrl}/channel`,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(channelData),
                success: function (data) {
                    showResponse(data);
                }
            });
        }

        function deleteDeviceChannel () {
            const channelId = prompt("请输入要删除的通道ID：");
            if (channelId) {
                $.ajax({
                    url: `${baseUrl}/channel/${channelId}`,
                    type: 'DELETE',
                    success: function (data) {
                        showResponse(data);
                    }
                });
            }
        }
    </script>
</body>

</html>